import { useContext } from 'react'
import { useRecoilValue } from 'recoil'
import { Table, Button, Popconfirm, Popover } from 'antd'
import { ColumnsType } from 'antd/es/table/interface'
import { useNavigate } from 'react-router-dom'
import styles from './index.module.less'
import { IQuarter } from '../../type/ward'
import { contextForWard } from '../../_context'
import IconSvg from '@/components/IconSvg'
import { dictValues } from '@/store/dicts'

export default () => {
  const navigate = useNavigate()
  const { quarter, deleteHandle } = useContext(contextForWard)
  const quarterList = useRecoilValue(dictValues).quarter

  // 获取季度
  const getQuarter = (value: string) => {
    const flag = quarterList.find((item) => item.value === value)
    if (flag) {
      return flag.label
    }
  }
  // 获取进行状态
  const getStartStatus = (isStaging: boolean) => {
    if (isStaging) {
      return <div className={styles.ing}>进行中</div>
    }
    return <div className={styles.done}>已结束</div>
  }

  // 获取提交状态
  const getSubmitStatus = (value: number) => {
    if (value === 0) {
      return <div className={styles.no}>未提交</div>
    }
    if (value === 1) {
      return <div className={styles.submitDone}>已提交</div>
    }
    if (value === 2) {
      return <div className={styles.sendBack}>已退回</div>
    }
  }

  // 获取操作
  const getOperate = (record: IQuarter) => {
    if (record.status === 0) {
      return (
        <div className={styles.operateItem}>
          <Button
            onClick={() => navigate(`/report-detail?id=${record.id}&onlyLook=${0}`)}
            type='link'
            icon={<IconSvg name='report-icon' style={{ marginRight: '4px' }} />}
          >
            开始填报
          </Button>
        </div>
      )
    }
    if (record.status === 1) {
      return (
        <div className={styles.operateItem}>
          <Button
            onClick={() => navigate(`/report-detail?id=${record.id}&onlyLook=${1}`)}
            type='link'
            icon={<IconSvg name='look' style={{ marginRight: '4px' }} />}
          >
            查看详情
          </Button>
          {record.reportStatus === 0 && (
            <Popconfirm onConfirm={() => deleteHandle(record)} title='确定退回吗？' okText='确定' cancelText='取消'>
              <Button danger type='link' icon={<IconSvg name='sendBack' style={{ marginRight: '4px' }} />}>
                申请退回
              </Button>
            </Popconfirm>
          )}
        </div>
      )
    }
    if (record.status === 2) {
      return (
        <div className={styles.operateItem}>
          <Button
            onClick={() => navigate(`/report-detail?id=${record.id}&onlyLook=${0}`)}
            type='link'
            icon={<IconSvg name='continue' style={{ marginRight: '4px' }} />}
          >
            继续填报
          </Button>
        </div>
      )
    }
  }

  const creatReason = (item: string) => (
    <div style={{ whiteSpace: 'pre-wrap' }} className={styles.reason}>
      {item}
    </div>
  )

  const columns: ColumnsType<IQuarter> = [
    {
      title: '季度',
      dataIndex: 'dataReportQuarter',
      key: 'dataReportQuarter',
      align: 'center',
      render: (value, record) => (
        <div className={styles.quarterWrapper}>
          {record.dataReportYear}
          {getQuarter(value)}
          {getStartStatus(record.isProceed)}
        </div>
      ),
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      align: 'center',
      render: (value, record) => (
        <>
          {value === 2 && record.returnReason ? (
            <>
              <Popover content={creatReason(record.returnReason!)} title='退回原因'>
                <div className={styles.statusWrapper}>
                  {getSubmitStatus(value)}
                  {record.reportTime}
                </div>
              </Popover>
            </>
          ) : (
            <>
              <div className={styles.statusWrapper}>
                {getSubmitStatus(value)}
                {record.reportTime}
              </div>
            </>
          )}
        </>
      ),
    },
    {
      title: '操作',
      align: 'center',
      width: 320,
      render: (value, record) => getOperate(record),
    },
  ]
  return <Table rowKey='id' pagination={false} dataSource={quarter} className={styles.tableWrapper} columns={columns} />
}
